<template>
	<!-- 顶部模块：导航 nav -->
	<header class="navbar navbar-expand-lg">
		<div class="container-fluid">
			<RouterLink class="navbar-brand" :to="titleUrl" v-once>
				{{ title }}
			</RouterLink>

			<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
				data-bs-target="#header-navbar" aria-controls="header-navbar" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="header-navbar">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<template v-for="item in navs">
						<li v-if="item.visiable" :class="['nav-item', item.class]" @click="onNavClick(item.name)">
							<RouterLink class="nav-link" :to="item.target">
								{{ $t('nav.' + item.name) }}
							</RouterLink>
						</li>
					</template>
				</ul>
				<div class="d-flex func-menu-wrap">
					<ul class="navbar-nav me-auto mb-2 mb-lg-0">
						<li class='nav-item' v-for="item in func">
							<RouterLink :to="item.url">
								<span :class="item.icon"></span>
								{{ item.value ?? $t(item.name) }}
							</RouterLink>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</header>
</template>



<script type="module">
import { RouterLink } from 'vue-router';
import { UniqueSelector } from '@/common/common.object';
import { store } from '@/common/store';

let uc = UniqueSelector.byList([], "name");

export default {
	props: ['title', 'titleUrl', 'navs', 'func'],
	data() {
		return {
			store,
		};
	},
	created() {
		uc = UniqueSelector.byList(this.navs, "name");

		this.onNavChange(store.activeNav);
	},
	methods: {
		onNavClick(item) {
			this.onNavChange(item);
		},
		onNavChange(value) {
			let oldActiveItem = uc.reselect(value);

			if (oldActiveItem) {
				oldActiveItem.class = null;
			}

			let newActiveItem = uc.value();

			if (newActiveItem) {
				newActiveItem.class = 'active';
			}
		}
	},
	watch: {
		'store.activeNav'(newValue) {
			// console.log("watch activeNav: ", newValue);

			this.onNavChange(newValue);
		}
	}
}
</script>


<style scoped>
.navbar {
	padding: 0;

	line-height: 32px;

	background-color: #F8F8F8;
	border-bottom: 2px solid #E7E7E7;
	box-sizing: border-box;
}

.navbar .navbar-brand {
	padding: 0 1rem;

	font-size: 18px;
	color: black !important;
}

.navbar-nav .nav-item {
	padding: 0 8px;
}


.navbar-nav .nav-item.active {
	background-color: #e7e7e7;
}


.navbar-nav .nav-item>a {
	color: #777 !important;
}

.navbar-nav .nav-item:hover>a,
.navbar-nav .nav-item:focus>a,
.navbar-nav .nav-item:active>a {
	color: #333 !important;
}

.func-menu-wrap .navbar-nav .nav-item {
	padding: 0 12px;
}
</style>